<template>
  <div>
    <el-card shadow="never">
      <h3>发起投票</h3>
    </el-card>
    <br>
    <el-card shadow="never">

      <el-form label-width="100px" size="mini">
        <el-form-item label="投票类型">
          <el-select v-model="addForm.typeId" placeholder="请选择类别">
            <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="标题">
          <el-input v-model="addForm.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="addForm.desc" :rows="3" type="textarea" placeholder="请输入投票描述" />
        </el-form-item>
        <el-form-item label="类型">
          <el-radio-group v-model="addForm.resultType">
            <el-radio label="结果可见" />
            <el-radio label="结果不可见" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="">
          <el-button plain size="mini" type="warning" @click="addItem">添加投票选项</el-button>
          <span class="sub" style="font-size:12px;">(序号越小，选项越靠前)</span>
          <el-table v-if="addForm.itemList.length>0" :data="addForm.itemList">
            <el-table-column
              label="序号"
              align="center"
              fixed=""
              width="80"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.no" placeholder="序号" />
              </template>
            </el-table-column>
            <el-table-column
              label="选项内容"
              align="center"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.content" placeholder="选项内容" />
              </template>
            </el-table-column>
            <el-table-column
              label="#"
              align="center"
              width="80"
            >
              <template slot-scope="scope">
                <el-button size="mini" plain type="danger" @click="removeBtn(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="">
          <el-button size="mini" type="primary" @click="publishBtn">发布</el-button>
          <!--          <el-button style="margin-left:16px;" size="mini">重置</el-button>-->
        </el-form-item>
      </el-form>

    </el-card>
  </div>
</template>

<script>
import * as typeApi from '../../../api/type'
import * as voteApi from '@/api/vote'
import { getUser } from '@/utils/auth'
export default {
  name: '',
  data() {
    return {
      addForm: {
        itemList: []
      },
      typeList: [],
      time: new Date()
    }
  },
  created() {
    typeApi.list().then(resp => {
      this.typeList = resp.data
    })
  },
  methods: {
    addItem() {
      this.addForm.itemList.push({
        no: '',
        content: ''
      })
    },
    publishBtn() {
      this.addForm.userId = getUser().id
      this.addForm.create_time = this.time.toLocaleTimeString()
      voteApi.add(this.addForm).then(resp => {
        this.$notifySuccess('添加成功')
      })
    },
    removeBtn(row) {
      // 获取当前行的索引进行分割删除
      const index = this.addForm.itemList.findIndex(item => item.no === row.no)
      this.addForm.itemList.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
